<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>032-flex基准长度</title>
		<style>
			.box {
				width: 900px;
				height: 700px;
				border: 1px solid gray;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
			}

			.inner {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				border: 1px solid darksalmon;
				box-sizing: border-box;
			}

			.inner2 {
				/* 设了基准长度后，原始元素的宽或高的长度将会被忽略，而由基准长度决定（根据主轴的方向，横轴设置width，纵轴设置height）。 */
				flex-basis: 400px; /* 默认值 auto 表示不设置基准长度，按元素自身的宽或高来决定 */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner">inner1</div>
			<div class="inner inner2">inner2</div>
			<div class="inner">inner3</div>
		</div>
	</body>
</html>
